import React from 'react'

/**
 * this.setState() 修改 state 值
 * 
 * this.setState() 两个作用
 * 
 * ① 修改数据
 * ② 更新视图
 */

export default class App extends React.Component {
  state = {
    name: '百里玄策',
    age: 3
  }

  handle () {
    // 只需要将 this 指向组件实例就能够实现功能
    console.log(this)
    // Cannot read property 'setState' of undefined
    this.setState({
      name: '亚瑟',
      // 注意: 在 react 中，不建议修改原来的值
      // 记住：这里不能使用 ++ 
      // 因为使用 ++ 是对数据本身进行了修改
      age: this.state.age + 1
    })
  }

  render () {
    return (
      <div>
        <p>姓名： { this.state.name }，年龄：  { this.state.age }</p>
        <p>
          <button onClick={ this.handle }>修改state值</button>
        </p>
      </div>
    )
  }
}
